# Component: Theme Selector

UI mode switcher for light, dark, and system preferences

Nav Utility

### BEM Anatomy

| Type      | Class Name           | Description                                                                             |
| --------- | -------------------- | --------------------------------------------------------------------------------------- |
| ==Block== | `.as-theme-selector` | The list item wrapper. Extends `nav-item dropdown`. Ensures content doesn't wrap.       |
| Element   | `__toggle`           | The dropdown trigger link. Handles the "Theme" label visibility on small screens.       |
| Element   | `__menu`             | The actual dropdown container, right-aligned (`dropdown-menu-end`).                     |
| Element   | `__menu-item`        | The list item (`<li>`) wrapper within the dropdown menu.                                |
| Modifier  | `__menu-item--light` | Specific container logic for the Light mode option.                                     |
| Modifier  | `__menu-item--dark`  | Specific container logic for the Dark mode option.                                      |
| Modifier  | `__menu-item--auto`  | Specific container logic for the System/Auto mode option.                               |
| Element   | `__link`             | The interactive button or anchor within the menu item.                                  |
| Modifier  | `__link--light`      | Styling for the Light mode trigger; typically includes a sun icon.                      |
| Modifier  | `__link--dark`       | Styling for the Dark mode trigger; typically includes a moon icon.                      |
| Modifier  | `__link--auto`       | Styling for the System mode trigger; typically includes a computer or "half-moon" icon. |

### Bootstrap Integration

The component relies on the `data-bs-theme-value` attribute to communicate with a theme-switching script. Icons within the menu items are standardized with a right margin to ensure alignment between the glyph and the text label.

##### Generated HTML

```html
<li class="as-theme-selector nav-item dropdown">
    <a class="as-theme-selector__toggle nav-link dropdown-toggle" ...>
        <i class="fa-solid fa-circle-half-stroke"></i>
    </a>
    <ul class="as-theme-selector__menu dropdown-menu dropdown-menu-end">
        <li class="as-theme-selector__menu-item">
            <a class="as-theme-selector__link" data-bs-theme-value="dark">
                <i class="fa-solid fa-moon"></i> Dark
            </a>
        </li>
    </ul>
</li>
```

##### SCSS

```scss
.as-theme-selector {
  white-space: nowrap; // Prevents line breaks in nav

  &__toggle {
    color: var(--bs-white);
    i { margin-right: 0.25rem; }
  }

  &__menu-item {
    i { margin-right: 0.25rem; }
  }
  
  // Logical placeholder for 
  // potential logout extension
  &__button--logout {
    color: var(--bs-danger);
  }
}
```
